<template>
    <div id="app">
        <div class="top">
            <div class="banner">
                <div class="swiper-container" id="banner">
                    <div class="parallax-bg"></div>
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <router-link to=""><img src="@/assets/travel/images/banner01.jpg" alt="">
                            </router-link>
                        </div>
                        <div class="swiper-slide">
                            <router-link to=""><img src="@/assets/travel/images/banner02.jpg" alt="">
                            </router-link>
                        </div>
                        <div class="swiper-slide">
                            <router-link to=""><img src="@/assets/travel/images/banner03.jpg" alt="">
                            </router-link>
                        </div>
                        <div class="swiper-slide">
                            <router-link to=""><img src="@/assets/travel/images/banner04.jpg" alt="">
                            </router-link>
                        </div>
                        <div class="swiper-slide">
                            <router-link to=""><img src="@/assets/travel/images/banner05.jpg" alt="">
                            </router-link>
                        </div>
                    </div>
                    <div class="swiper-pagination swiper-pagination-white"></div>
                </div>
            </div>
        </div>

        <ul class="cate">
            <router-link to="/wgj/eat"><img src="@/assets/travel/images/icon1.png" alt="">吃在建湖</router-link>
            <router-link to="/wgj/play"><img src="@/assets/travel/images/icon2.png" alt="">玩在建湖</router-link>
            <router-link to="/wgj/live"><img src="@/assets/travel/images/icon3.png" alt="">住在建湖</router-link>
            <router-link to="/wgj/buy"><img src="@/assets/travel/images/icon4.png" alt="">购在建湖</router-link>
        </ul>

        <h1 class="bt">
            <router-link to="/wgj/eat">吃在建湖<img src="@/assets/travel/images/more.png" alt=""></router-link>
        </h1>

        <travel-tbale-list :list="list.eatList"></travel-tbale-list>

        <h1 class="bt">
            <router-link to="/wgj/play">玩在建湖<img src="@/assets/travel/images/more.png" alt="">
            </router-link>
        </h1>
        <travel-tbale-list :list="list.playList"></travel-tbale-list>

        <h1 class="bt">
            <router-link to="/wgj/live">住在建湖<img src="@/assets/travel/images/more.png" alt=""></router-link>
        </h1>
        <travel-tbale-list :list="list.liveList"></travel-tbale-list>

        <h1 class="bt">
            <router-link to="/wgj/buy">购在建湖<img src="@/assets/travel/images/more.png" alt=""></router-link>
        </h1>
        <travel-tbale-list :list="list.travelList"></travel-tbale-list>
    </div>
</template>

<script>
    import Swiper from 'swiper';
    import 'swiper/dist/css/swiper.min.css';
    import travelTbaleList from '@/componets/travel-home-table';
    import home from '@/api/travel/home';

    export default {
        data() {
            return {
                list: {
                    eatList: [],
                    playList: [],
                    liveList: [],
                    travelList: []
                },
            }
        },
        components: {
            travelTbaleList
        },
        methods: {
            getEatList() {
                home.getListByType(1, 2, '吃在建湖').then(response => {
                    this.list.eatList = response.data.data;
                });
            },
            getPlayList() {
                home.getListByType(1, 2, '玩在建湖').then(response => {
                    this.list.playList = response.data.data;
                });
            },
            getLiveList() {
                home.getListByType(1, 2, '住在建湖').then(response => {
                    this.list.liveList = response.data.data;
                });
            },
            getTravelList() {
                home.getListByType(1, 2, '购在建湖').then(response => {
                    this.list.travelList = response.data.data;
                });
            }
        },
        created() {
            this.getEatList();
            this.getPlayList();
            this.getLiveList();
            this.getTravelList();
        },
        mounted() {
            new Swiper('#banner', {
                pagination: '.banner .swiper-pagination', // 如果需要分页器
                paginationClickable: true,
                nextButton: '.banner .swiper-button-next', // 如果需要前进后退按钮
                prevButton: '.banner .swiper-button-prev', // 如果需要前进后退按钮
                parallax: true,
                speed: 600,
                loop: true,
                effect: 'coverflow',
                autoplay: 3000, //可选选项，自动滑动
            })
        }
    }
</script>

<style scoped>
    @import "../../assets/travel/css/base.css";
    @import "../../assets/travel/css/other.css";
    @import "../../assets/travel/css/swiper.min.css";
</style>
